describe('TodoList - 新增和删除功能 E2E 测试', () => {
  beforeEach(() => {
    cy.visit('/')
  })

  describe('页面基本元素', () => {
    it('应该显示页面标题和基本元素', () => {
      cy.contains('待办事项列表').should('be.visible')
      cy.get('[data-cy="todo-input"]').should('be.visible')
      cy.get('[data-cy="add-button"]').should('be.visible')
      cy.get('[data-cy="repo-link"]').should('be.visible').and('contain', '仓库地址')
    })

    it('仓库链接应该正确', () => {
      cy.get('[data-cy="repo-link"]')
        .should('have.attr', 'href', 'https://gitee.com/rran99/001.git')
        .and('have.attr', 'target', '_blank')
    })
  })

  describe('新增TODO功能', () => {
    it('应该能够添加新的TODO项目', () => {
      const todoText = '学习Cypress E2E测试'
      
      // 添加TODO
      cy.addTodo(todoText)
      
      // 验证TODO已添加
      cy.shouldHaveTodo(0, todoText)
      cy.get('[data-cy="todo-list"]').children().should('have.length', 1)
      
      // 验证输入框已清空
      cy.get('[data-cy="todo-input"]').should('have.value', '')
    })

    it('应该能够通过回车键添加TODO', () => {
      const todoText = '通过回车键添加的任务'
      
      cy.get('[data-cy="todo-input"]').type(todoText).type('{enter}')
      
      cy.shouldHaveTodo(0, todoText)
      cy.get('[data-cy="todo-input"]').should('have.value', '')
    })

    it('应该能够连续添加多个TODO项目', () => {
      const todos = ['任务1', '任务2', '任务3']
      
      todos.forEach((todo, index) => {
        cy.addTodo(todo)
        cy.shouldHaveTodo(index, todo)
      })
      
      cy.get('[data-cy="todo-list"]').children().should('have.length', 3)
    })

    it('不应该添加空白的TODO项目', () => {
      // 尝试添加空白任务
      cy.get('[data-cy="todo-input"]').type('   ')
      cy.get('[data-cy="add-button"]').click()
      
      // 验证没有添加任务
      cy.get('[data-cy="todo-list"]').children().should('have.length', 0)
    })

    it('添加TODO后应该显示计数信息', () => {
      cy.addTodo('测试任务')
      
      cy.get('[data-cy="todo-count"]')
        .should('be.visible')
        .and('contain', '总计: 1')
        .and('contain', '已完成: 0')
        .and('contain', '未完成: 1')
    })
  })

  describe('删除TODO功能', () => {
    beforeEach(() => {
      // 为每个删除测试预先添加一些任务
      cy.addTodo('任务1')
      cy.addTodo('任务2')
      cy.addTodo('任务3')
    })

    it('应该能够删除单个TODO项目', () => {
      // 删除第二个任务
      cy.deleteTodo(1)
      
      // 验证任务已删除，剩余任务正确
      cy.get('[data-cy="todo-list"]').children().should('have.length', 2)
      cy.shouldHaveTodo(0, '任务1')
      cy.shouldHaveTodo(1, '任务3')
    })

    it('应该能够删除第一个TODO项目', () => {
      cy.deleteTodo(0)
      
      cy.get('[data-cy="todo-list"]').children().should('have.length', 2)
      cy.shouldHaveTodo(0, '任务2')
      cy.shouldHaveTodo(1, '任务3')
    })

    it('应该能够删除最后一个TODO项目', () => {
      cy.deleteTodo(2)
      
      cy.get('[data-cy="todo-list"]').children().should('have.length', 2)
      cy.shouldHaveTodo(0, '任务1')
      cy.shouldHaveTodo(1, '任务2')
    })

    it('删除任务后计数应该正确更新', () => {
      // 验证初始计数
      cy.get('[data-cy="todo-count"]').should('contain', '总计: 3')
      
      // 删除一个任务
      cy.deleteTodo(0)
      
      // 验证计数更新
      cy.get('[data-cy="todo-count"]').should('contain', '总计: 2')
    })

    it('删除所有任务后操作区域应该隐藏', () => {
      // 逐个删除所有任务
      cy.deleteTodo(0)
      cy.deleteTodo(0)
      cy.deleteTodo(0)
      
      // 验证列表为空
      cy.get('[data-cy="todo-list"]').children().should('have.length', 0)
      
      // 验证操作区域隐藏
      cy.get('.actions').should('not.exist')
    })

    it('删除所有任务后应该能够重新添加', () => {
      // 删除所有任务
      cy.deleteTodo(0)
      cy.deleteTodo(0)
      cy.deleteTodo(0)
      
      // 添加新任务
      cy.addTodo('重新开始的任务')
      
      // 验证新任务已添加
      cy.shouldHaveTodo(0, '重新开始的任务')
      cy.get('[data-cy="todo-count"]').should('contain', '总计: 1')
    })
  })

  describe('用户交互体验', () => {
    it('输入框应该有正确的占位符', () => {
      cy.get('[data-cy="todo-input"]')
        .should('have.attr', 'placeholder', '添加新的待办事项')
    })

    it('页面应该有良好的视觉反馈', () => {
      cy.addTodo('测试任务')
      
      // 验证任务项的样式
      cy.get('[data-cy="todo-item-0"]')
        .should('be.visible')
      
      // 验证复选框存在
      cy.get('[data-cy="todo-checkbox-0"]').should('be.visible')
      
      // 验证删除按钮存在
      cy.get('[data-cy="delete-button-0"]')
        .should('be.visible')
        .and('contain', '删除')
    })
  })
})
